<template>
  <div class="chart">
    <div class="little-box">
      <el-card class="box-card">
        <ul class="ul">
          <div class="a">
            <p>今日新增用户</p>
            <li>{{ increment_users }}</li>
          </div>
          <div class="a">
            <p>总用户量</p>
            <li>{{ total_users }}</li>
          </div>
          <div class="a">
            <p>新增试题</p>
            <li style="color: #f76137; border: 2px solid #f76137">
              {{ increment_questions }}
            </li>
          </div>
          <div class="a">
            <p>总试题量</p>
            <li style="color: #f76137; border: 2px solid #f76137">
              {{ total_questions }}
            </li>
          </div>
          <div class="a">
            <p>总刷题量</p>
            <li style="color: #55cd78; border: 2px solid #55cd78">
              {{ total_done_questions }}
            </li>
          </div>
          <div class="a">
            <p>人均刷题量</p>
            <li style="color: #55cd78; border: 2px solid #55cd78">
              {{ personal_questions }}
            </li>
          </div>
        </ul>
      </el-card>
    </div>
    <div class="Bigbog">
      <el-card class="card">
        <echarts />
      </el-card>
    </div>
  </div>
</template>

<script>
import echarts from './components/echarts/echarts.vue'
import { dataTitle } from '@/api/chart.js'
export default {
  components: {
    echarts
  },
  data() {
    return {
      total_done_questions: '', // 刷题总数
      personal_questions: '', // 人均刷题数量
      total_users: '', // 用户总数
      increment_users: '', // 今日增长用户数量
      increment_questions: '', // 今日增加题数
      total_questions: '' // 题总数
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await dataTitle({})
      // console.log(res);
      this.total_done_questions = res.data.data.total_done_questions
      this.personal_questions = res.data.data.personal_questions
      this.total_users = res.data.data.total_users
      this.increment_users = res.data.data.increment_users
      this.increment_questions = res.data.data.increment_questions
      this.total_questions = res.data.data.total_questions
    }
  }
}
</script>

<style lang="scss" scoped>
.chart {
  padding: 20px;
  .little-box {
    margin-bottom: 20px;
    .box-card {
      height: 149px;
      .ul {
        width: 100%;
        height: 100px;
        padding-bottom: 14px;
        position: relative;
        display: flex;
        justify-content: space-around;
        .a {
          position: relative;
          left: -75px;
          p {
            position: absolute;
            width: 100px;
            height: 17px;
            top: 75px;
            margin-right: 50px;
            font-size: 16px;
            font-weight: 400;
            margin-bottom: 0;
            margin-top: 15px;
            color: #737373;
            text-align: center;
            font-size: 16px;
          }
          li {
            position: absolute;
            line-height: 99px;
            text-align: center;
            font-size: 35px;
            color: #0086fa;
            list-style: none;
            width: 99px;
            height: 99px;
            border: 2px solid #0086fa;
            border-radius: 50px;
            top: -15px;
          }
        }
      }
    }
  }
}
</style>
